html {font-size:calc(100vw / 7.5);}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {margin:0; padding:0 }
body, button, input, select, textarea {font:400 14px/1.5 "微软雅黑", "Microsoft YaHei", Helvetica, sans-serif;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section, iframe {display:block }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:500 }
address, cite, dfn, em, var, i {font-style:normal; font-weight:400 }
dfn {font-family:Arial;}
ul, ol {list-style:none;}
a {color:#000; text-decoration:none }
a:hover {-webkit-transition:color .2s linear; -moz-transition:color .2s linear; -ms-transition:color .2s linear; -o-transition:color .2s linear; transition:color .2s linear }
fieldset, img, button, input {border:0 }
button, input, select, textarea {font-size:100%; outline:none;}
table {border-collapse:collapse; border-spacing:0 }
input {-webkit-appearance:none; border-radius:0; width:100%; height:42px; border:0; padding:0 5px; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; outline:0 }
/*清除浮动*/
.clearfix:after{
	content: '';
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom:1;
}


html,body{
    width:100%;
    height:100%;
}


/* 首页 */
.gzl_play_solstice{
    width:100%;
    height:100%;
    background: url(../images/cover_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
}
.cover_tit{
    width:90%;
    margin-left:5%;
    padding-top: 5%;
    animation: title 0.8s linear alternate;
    -moz-animation: title 0.8s linear alternate;
    -webkit-animation: title 0.8s linear alternate;
    -o-animation: title 0.8s linear alternate;
}
.cover_btn_box{
    width:100%;
    position: absolute;
    bottom: 3%;
    text-align: center;
}
.t_btn{
    width:80%;
    margin-left:10%;
    text-align: left;
    margin-bottom: 2%;
}
.t_btn img{
    width:45%;
}
.trophy_btn{
    float: right;
}
.regular_btn{
    width:25%;
}
.pop_ups{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
}
.pop_ups_bg{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: #000;
    opacity: 0.7;
}
.pop_ups_box{
    width:90%;
    margin-left: 5%;
    margin-top: 20%;
    position: relative;
    z-index: 3;
}
.close{
    width: 12%;
    position: absolute;
    z-index: 4;
    top: 10%;
    right: 6%;
}
.trophy_box .pop_ups_box{
    width:86%;
    margin-left: 7%;
}
.qq_share_box .pop_ups_box{
    width:96%;
    margin-left: 2%;
    margin-top: 2%;
}









/* 游戏页 */
.gzl_solstice{
    width:100%;
    height:100%;
    background: url(../images/bg.jpg) no-repeat top center;
    background-size: 100% 100%;
}

/* 关注 */
.bomb_box{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
}
.bomb_box_bg{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.follow_qr{
    width: 50%;
    position: relative;
    top: 20%;
    left: 25%;
    z-index: 9;
}
.qr_tip{
    width: 90%;
    position: relative;
    top: 25%;
    left: 5%;
    z-index: 9;
}




/* 没有机会了 */
.no_chance_box{
    /* display: block; */
}
.no_chance_bg{
    width: 86%;
    height: 41%;
    position: absolute;
    left: 7%;
    top: 25%;
    background: url(../images/noChance_box.png) no-repeat top center;
    background-size: 100%;
}
.no_chance_bg img{
    width: 40%;
    position: absolute;
    top: 53%;
}
.more_surpise{
    left: 52%;
}
.no_share_btn{
    left: 6%;
}


/* 游戏失败 */
.fail_box{
    /* display: block; */
}
.fail_bg{
    width: 86%;
    height: 50%;
    position: absolute;
    left: 7%;
    top: 20%;
    background: url(../images/fail_bg.png) no-repeat top center;
    background-size: 100%;
}
.fail_tiptxt{
    position: relative;
    top: 24%;
    width: 85%;
    height: 20%;
    left: 10%;
}
.fail_tiptxt img{
    float: left;
    /* width: 20%; */
    height: 90%;
}
.remain_num{
    float: left;
    color: #702b3d;
    font-size: 22px;
    line-height: 100%;
}
.share_btn{
    width: 36%;
    position: absolute;
    left: 30%;
    top: 68%;
}
.shareTip{
    position: relative;
    width:96%;
    margin-left: 2%;
    margin-top: 2%;
    display: none;
}




/* 时间沙漏 */
.time_score_box{
    width:100%;
    height: 10%;
}
.time_box{
    display: inline-block;
    width:45%;
    height:100%;
    padding: 1% 2%;
}
.hourglass{
    width:22%;
    /* vertical-align: bottom; */
    float: left;
    margin-top: 3%;
}
.countclock{
    /* font-size: 30px;
    color: #fff;
    float: left;
    margin-top: 3%; */
    width: 70%;
    height: 55%;
    float: left;
    margin-top: 7%;
}
.clock_num{
    float: left;
    width: 20%;
    height: 100%;
    margin-right: -4%;
    background: url(../images/time_score_num.png) no-repeat;
    background-position: 0% 0%;
    background-size: 940%;
}
.clock_num_two{
    background-position: 33% 0%;
}
.clock_num_three{
    background-position: 33% 0%;
}
.countclock .top_num{
    float: left;
    width: 10%;
    margin-left: 4%;
    background: url(../images/top.png) no-repeat top center;;
    background-size: 100%;
}
.score_box{
    /* display: inline-block; */
    width:45%;
    height: 65%;
    margin-top: 4%;
    float: right;
}
.score_tit{
    width:45%;
    float: left;
    /* margin-top: 6%; */
}
.score_num{
    float: left;
    width:15%;
    height: 100%;
    margin-right: -4%;
    margin-top: -1%;
    background: url(../images/time_score_num.png) no-repeat;
    background-position: 0% 0%;
    background-size: 950%;
}
.score_num:first-child{
    margin-left: -4%;
}

/* 游戏区域 */









@keyframes title{
	0% {
		opacity: 0;
    	-webkit-transform: scale(0.2) rotate(30deg);
    	        transform: scale(0.2) rotate(30deg);
	}
	70% {
	    -webkit-transform: scale(1) rotate(5deg);
	            transform: scale(1) rotate(5deg);
	}
	80% {
	    -webkit-transform: scale(1.2) rotate(-10deg);
	            transform: scale(1.2) rotate(-10deg);
	}
	100% {
		opacity: 1;
	    -webkit-transform: scale(1) rotate(0deg);
	            transform: scale(1) rotate(0deg);
	}
}
@-webkit-keyframes title{
	0% {
		opacity: 0;
    	-webkit-transform: scale(0.2) rotate(30deg);
    	        transform: scale(0.2) rotate(30deg);
	}
	70% {
	    -webkit-transform: scale(1) rotate(5deg);
	            transform: scale(1) rotate(5deg);
	}
	80% {
	    -webkit-transform: scale(1.2) rotate(-10deg);
	            transform: scale(1.2) rotate(-10deg);
	}
	100% {
		opacity: 1;
	    -webkit-transform: scale(1) rotate(0deg);
	            transform: scale(1) rotate(0deg);
	}
}
@-moz-keyframes title{
	0% {
		opacity: 0;
    	-webkit-transform: scale(0.2) rotate(30deg);
    	        transform: scale(0.2) rotate(30deg);
	}
	70% {
	    -webkit-transform: scale(1) rotate(5deg);
	            transform: scale(1) rotate(5deg);
	}
	80% {
	    -webkit-transform: scale(1.2) rotate(-10deg);
	            transform: scale(1.2) rotate(-10deg);
	}
	100% {
		opacity: 1;
	    -webkit-transform: scale(1) rotate(0deg);
	            transform: scale(1) rotate(0deg);
	}
}
@-o-keyframes title{
	0% {
		opacity: 0;
    	-webkit-transform: scale(0.2) rotate(30deg);
    	        transform: scale(0.2) rotate(30deg);
	}
	70% {
	    -webkit-transform: scale(1) rotate(5deg);
	            transform: scale(1) rotate(5deg);
	}
	80% {
	    -webkit-transform: scale(1.2) rotate(-10deg);
	            transform: scale(1.2) rotate(-10deg);
	}
	100% {
		opacity: 1;
	    -webkit-transform: scale(1) rotate(0deg);
	            transform: scale(1) rotate(0deg);
	}
}